<!--
 * @Description: 一个通用的对话框。
 * @Author: youzi
 * @Date: 2019-08-05 09:57
 * @LastEditTime: 2020-06-30 09:36:26
 * @LastEditors: youzi
 -->
<!-- 
  usage:
  import modal from '~/tool/modal';
  <my-modal
    ref="testModal"
    :visible="visible"
    :loading="loading"
    title="标题"
    okText="确定按钮"
    @cancelHandler="cancelHandler"
    @okHandler="okHandler"
  >
    <template v-slot:content>
      <h1>这是一个测试的content</h1>
    </template>
  </my-modal>
  okHandler() {
    console.log('触发了父组件的ok');
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
      this.visible = false;
    }, 1500);
  }
  cancelHandler() {
    this.visible = false;
  }
  backup: 按钮的颜色默认是primary，如果需要使用关闭按钮的色调，在父组件使用时传入
  colorType="close"
  
  在v-slot: content里写其他的组件
  按照目前样式，提供确定按钮和右上角的“X”，分别触发okHandler和cancelHandler
  visible用于控制modal是否显示，loading用于控制点击确定后，按钮是否出现loading图标
  本来想用a-spin的，发现与嵌套modal不兼容。

  update: 后期添加了secondBtn，考虑到可扩展性，加了第二个按钮，兼容v1版本
  update: 添加了可配置的width和bodyheight，width是实际宽度，height是百分比小数
  update: 添加loading，主要用于提交时的阻止状态
 -->
<template>
  <div class="modal-wrapper">
    <a-modal
      centered
      closable
      :title="title"
      v-model="realVisible"
      :cancelText="cancelText"
      :okText="okText"
      @cancel="cancel"
      :maskClosable="false"
      :bodyStyle="bodyStyle"
      :width="width"
      :destroyOnClose="destroyOnClose"
    >
      <template slot="footer">
        <a-button style="width: 84px;" key="submit" type="primary" @click="ok" :disabled="loading" :class="isClose">
          {{ okText }}
        </a-button>
        <a-button
          v-if="!!secondBtnText"
          :disabled="loading"
          style="width: 84px;marginLeft: 15px;"
          @click="onClickSecondBtn"
        >
          {{ secondBtnText }}
        </a-button>
      </template>
      <a-spin :spinning="loading" :delay="200" :tip="tip">
        <slot name="content">default content for test</slot>
      </a-spin>
    </a-modal>
  </div>
</template>
<script>
export default {
  name: 'defaultModal',
  data() {
    return {};
  },
  computed: {
    realVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        return val;
      }
    },
    isClose: {
      get() {
        if (this.colorType === 'close') {
          return 'is-close-btn';
        }
      },
      set(val) {
        return val;
      }
    },
    bodyStyle() {
      return {
        maxHeight: window.innerHeight * this.bodyHeight + 'px',
        overflowY: 'scroll',
        padding: 0
      };
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    secondBtnText: {
      type: String,
      default: ''
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    tip: {
      type: String,
      default: '提交中...'
    },
    title: {
      type: String,
      default: 'title'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    okText: {
      type: String,
      default: '确定'
    },
    colorType: {
      type: String,
      default: 'primary'
    },
    width: {
      type: Number,
      default: 520
    },
    bodyHeight: {
      type: Number,
      default: 0.65
    }
  },
  methods: {
    init() {},
    ok() {
      // console.log('click ok');
      this.$emit('okHandler');
    },
    cancel() {
      // console.log('click cancel');
      if (this.loading) {
        return;
      }
      this.$emit('cancelHandler');
    },
    onClickSecondBtn() {
      this.$emit('onClickSecondBtn');
    }
  }
};
</script>
<style lang="less" scoped>
@closeBtn: #95a1c0;
.is-close-btn {
  background-color: @closeBtn;
  border-color: @closeBtn;
}
/* @modal-border-radius: 10px;
.modal-wrapper {
  .ant-modal-header {
    border-top-left-radius: @modal-border-radius;
    border-top-right-radius: @modal-border-radius;
  }
  .ant-modal-footer {
    border-top: 0;
    border-bottom-left-radius: @modal-border-radius;
    border-bottom-right-radius: @modal-border-radius;
  }
} */
</style>
